<!DOCTYPE html>

<head>
  <meta charset="UTF-8">
  <style>
    html,
    body,
    #map {
      height: 100%;
    }

    #map {
      background: pink;
    }
  </style>
  <title>一个最简单的例子</title>
  <link rel="stylesheet" href="../library/ol/ol.css">
  <link rel="stylesheet" href="../css/common.css">
</head>

<body>
  <div id="map" class="map"></div>
  <script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.js"></script>
  <script src="../library/ol/ol-debug.js"></script>
  <script src="./js/common.js"></script>
  <script type="text/javascript">
    $(document).ready(function () {
      // add gaode
      var gaodeMapLayer = new ol.layer.Tile({
        source: new ol.source.XYZ({
          url: 'http://wprd0{1-4}.is.autonavi.com/appmaptile?lang=zh_cn&size=1&style=7&x={x}&y={y}&z={z}'
        })
      });

      // 水平地包裹世界。如果要在-180°和180°经络之间进行矢量编辑才能正常工作，则应将其设置为false。由此产生的几何坐标将超过世界范围。
      var source = new ol.source.Vector({
        wrapX: false
      })
      var styleFunction = function (feature) {
        var geometry = feature.getGeometry();
        var styles = [
          // linestring
          new ol.style.Style({
            stroke: new ol.style.Stroke({
              color: '#ffcc33',
              width: 2
            })
          })
        ];

        geometry.forEachSegment(function (start, end) {
          var dx = end[0] - start[0];
          var dy = end[1] - start[1];
          var rotation = Math.atan2(dy, dx);
          // arrows
          styles.push(new ol.style.Style({
            geometry: new ol.geom.Point(end),
            image: new ol.style.Icon({
              src: '../data/arrow.png',
              anchor: [0.75, 0.5],
              rotateWithView: true,
              rotation: -rotation
            })
          }));
        });

        return styles;
      };
      var vector = new ol.layer.Vector({
        source: source,
        style: styleFunction
      });

      // add gaode
      var map = new ol.Map({
        layers: [gaodeMapLayer, vector],
        view: new ol.View({
          center: [106.51, 29.55],
          projection: 'EPSG:4326',
          zoom: 10
        }),
        target: 'map'
      })

      map.addInteraction(new ol.interaction.Draw({
        source: source,
        type: 'LineString'
      }));
    })
  </script>
</body>